<template>
  <div class="mid">
    <div class="headimg">
      <h1>商品大类展示</h1>
    </div>
    <div class="ab a1" @click="toDisplay(1)">
      <div class="txt">
        <h1>CATS</h1>
      </div>
      <div class="imghid">
        <div class="img">
          <img alt="" />
        </div>
      </div>
    </div>
    <div class="ab a2" @click="toDisplay(2)">
      <div class="imghid">
        <div class="img">
          <img alt="" @click="toDisplay" />
        </div>
      </div>
      <div class="txt">
        <h1>DOGS</h1>
      </div>
    </div>
    <div class="ab a3" @click="toDisplay(3)">
      <div class="txt">
        <h1>BIRDS</h1>
      </div>
      <div class="imghid">
        <div class="img">
          <img alt="" @click="toDisplay" />
        </div>
      </div>
    </div>
    <div class="ab a4" @click="toDisplay(4)">
      <div class="imghid">
        <div class="img">
          <img alt="" />
        </div>
      </div>
      <div class="txt">
        <h1>FISH</h1>
      </div>
    </div>
    <div class="ab a5" @click="toDisplay(5)">
      <div class="txt">
        <h1>REPTILE</h1>
      </div>
      <div class="imghid">
        <div class="img">
          <img alt="" />
        </div>
      </div>
    </div>
    <br />
    <br />
  </div>
</template>

<script>
export default {
  methods: {
    toDisplay(e) {
      let categoryId = "";
      switch (e) {
        case 1:
          categoryId = "CATS";
          break;
        case 2:
          categoryId = "DOGS";
          break;
        case 3:
          categoryId = "BIRDS";
          break;
        case 4:
          categoryId = "FISH";
          break;
        default:
          categoryId = "REPTILES";
          break;
      }

      this.$router.push({
        name: "Display",
        params: {
          category: categoryId,
        },
      });
    },
  },
};
</script>

<style scoped>
@charset "utf-8";

.mid {
  height: 180vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.headimg {
  top: 0px;
  height: 320px;
  width: 100%;
  background-image: url("../assets/headimg2.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: -350px;
  /* background-position-x: -150px; */
  overflow: hidden;
  border-bottom: 5px solid rgb(58, 83, 85);
  animation: headload 0.9s linear;
}

.headimg h1 {
  color: rgb(92, 136, 177);
  font-size: 5em;
  text-align: center;
  font-weight: bolder;
  font-family: NSimSun;
  color: rgba(0, 122, 222, 0.9);
  line-height: 150px;
}

.mid .ab {
  width: 800px;
  height: 300px;
  box-shadow: 0 0 15px rgb(83, 103, 110);
  background: rgba(71, 142, 175, 0.2);
  border-radius: 15px;
  backdrop-filter: blur(5px);
  display: flex;
  overflow: hidden;
  margin-top: 40px;
}

.ab p {
  word-wrap: break-word;
  color: rgb(41, 68, 68);
  line-height: 24px;
}

.ab .txt {
  width: 400px;
  margin: 0 50px 0 50px;
}

.ab h2 {
  text-align: center;
  color: rgb(51, 86, 114);
}

.ab .img {
  width: 300px;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.3);
  opacity: 0.8;
  transition: all 0.5s ease 0s;
}

.ab .img:hover {
  transform: scale(1.1);
}

.ab .imghid {
  overflow: hidden;
}

.a1 {
  margin-left: 40%;
  animation: a1load 2.4s linear;
  transition: 0.5s;
}

.a2 {
  margin-left: 10%;
  animation: a2load 3.6s linear;
  transition: 0.5s;
}

.a3 {
  margin-left: 40%;
  animation: a3load 4.8s linear;
  transition: 0.5s;
}

.a4 {
  margin-left: 10%;
  animation: a4load 6s linear;
  transition: 0.5s;
}

.a5 {
  margin-left: 40%;
  animation: a5load 7.2s linear;
  transition: 0.5s;
}

.a3 h2 {
  margin-top: 100px;
  line-height: 50px;
}

@keyframes a1load {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
    margin-top: 40px;
  }
}

@keyframes a2load {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}

@keyframes a3load {
  0% {
    opacity: 0;
  }

  70% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}
@keyframes a4load {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}
@keyframes a5load {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}

@keyframes headload {
  0% {
    height: 0px;
  }

  100% {
    height: 320px;
  }
}
.a1 .img {
  background-image: url("../assets/catalog-cat.jpg");
}
.a2 .img {
  background-image: url("../assets/catalog-dog.jpg");
}
.a3 .img {
  background-image: url("../assets/catalog-bird.jpg");
}
.a4 .img {
  background-image: url("../assets/catalog-fish.jpg");
}
.a5 .img {
  background-image: url("../assets/catalog-reptile.jpg");
}
</style>
